<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！-- -->
    <title>hello</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script>

  
    alert(getContextPath());
</script>
    <style type="text/css">
        body{
            padding-top: 50px;
        }
        .carousel{
            height: 500px;
            background-color: #000;
            margin-bottom: 60px;
        }
        .carousel .item{
            height: 500px;
            background-color: #000;
        }
        .carousel img{
            width: 100%;
        }
        .carousel-caption p{
            margin-bottom: 20px;
            font-size: 20px;
            line-height: 1.8;
        }
        #sum_cont .col-md-4{
            text-align: center;
        }
        hr.divider{
            margin: 40px 0;
        }
        .featrue{
            padding: 30px 0;
        }
        .featrue-head{
            font-size: 50px;
            color:#1b6d85;
            margin-top: 100px;
        }
        .featrue-head .text-muted{
            font-size: 28px;
            color: #777777;
        }
        #ply{width: 330px;
            height: 86px;
            position: fixed;
            top: 50px;
            right: 3px;
            opacity:0.75;
        }
    </style>
</head>
<body>
<!----
* navbar-fixed-top : 导航条置顶
* navbar-inverse : 颜色反转
---->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">主页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="查询">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">注册</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    1212
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="../images/chrome-big.jpg" alt="First slide">
            <div class="carousel-caption">
                <h1>Chrome</h1>
                <p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求</p>
                <a class="btn btn-lg btn-primary" href="http://tieba.baidu.com/f?kw=chrome&fr=ala0&tpl=5" target="_blank">点我下载</a>
            </div>
        </div>
        <div class="item">
            <img src="../images/firefox-big.jpg" alt="Second slide">
            <div class="carousel-caption">
                <h1>Firefox</h1>
                <p>Firefox 击败其它浏览器荣获“速度之王”！无论是专业测速还是您的日常操作，Firefox 都将给您最快的浏览体验。</p>
                <a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank">点我下载</a>
            </div>
        </div>
        <div class="item">
            <img src="../images/ie-big.jpg" alt="Third slide">
            <div class="carousel-caption">
                <h1>Microsoft Edge </h1>
                <p>体验 Windows 10 这一全新 Web 浏览器。 在网页上书写、更快速地搜索和不受干扰地阅读，所有这些都不用离开页面。 </p>
                <a class="btn btn-lg btn-primary" href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank">点我下载</a>
            </div>
        </div>
        <div class="item">
            <img src="../images/safari-big.jpg" alt="Firefox">
            <div class="carousel-caption">
                <h1>Safari</h1>
                <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。</p>
                <a class="btn btn-lg btn-primary" href="https://extensions.apple.com/" target="_blank">点我下载</a>
            </div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev" role="button">
        <!--向左的箭头-->
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next" role="button">
        <!--向右的箭头-->
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<div class="container" id="sum_cont">
    <div class="row">
        <div class="col-md-4">
            <img class="img-circle" src="../images/chrome-logo-small.jpg" alt="chrome">
            <h2>Chrome</h2>
            <p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求</p>
            <p>
                <a class="btn btn-default" href="http://tieba.baidu.com/f?kw=chrome&fr=ala0&tpl=5" target="_blank" role="button">点我下载</a>
            </p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="../images/firefox-logo-small.jpg" alt="Firefox">
            <h2>Firefox</h2>
            <p>Firefox 击败其它浏览器荣获“速度之王”！无论是专业测速还是您的日常操作，Firefox 都将给您最快的浏览体验。</p>
            <p>
                <a class="btn btn-default" href="http://www.firefox.com.cn/download/" target="_blank" role="button">点我下载</a>
            </p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" src="../images/safari-logo-small.jpg" alt="chrome">
            <h2>Safari</h2>
            <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。</p>
            <p>
                <a class="btn btn-default" href="https://extensions.apple.com/" target="_blank" role="button">点我下载</a>
            </p>
        </div>
    </div>
    <hr class="divider">

    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#bro_chrome"  role="tab" data-toggle="tab">Chrome</a></li>
        <li><a href="#bro_firefox"  role="tab" data-toggle="tab">FireFox</a></li>
        <li><a href="#bro_safari"  role="tab" data-toggle="tab">Safari</a></li>
    </ul>
    <div class="tab-content">

            <div class="tab-pane active" id="bro_chrome">
                <div class="row featrue">
                    <div class="col-md-7 featrue-head">
                        <h2>chrome<span class="text-muted">页面调试方便,适合开发人员使用</span></h2>
                        <p class="lead">Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求</p>
                    </div>
                    <div class="col-md-5">
                        <img class="img-responsive" alt="chrome" src="../images/chrome-logo.jpg">
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="bro_firefox">
                <div class="row featrue">
                    <div class="col-md-7">
                        <img class="img-responsive" alt="firefox" src="../images/firefox-logo.jpg">
                    </div>
                    <div class="col-md-5 featrue-head">
                        <h2>Firefox<span class="text-muted">js响应速度快</span></h2>
                        <p class="lead">Firefox 击败其它浏览器荣获“速度之王”！无论是专业测速还是您的日常操作，Firefox 都将给您最快的浏览体验。</p>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="bro_safari">
                <div class="row featrue">
                    <div class="col-md-7 featrue-head">
                        <h2>Safari<span class="text-muted">果粉首选</span></h2>
                        <p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。</p>
                    </div>
                    <div class="col-md-5">
                        <img class="img-responsive" alt="safari" src="../images/safari-logo.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>


<div id="ply">
    <iframe frameborder="no"
            border="0"
            marginwidth="0"
            marginheight="0"
            width=330
            height=86
            src="http://music.163.com/outchain/player?type=2&id=33941662&auto=1&height=66">
    </iframe>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">


</script>

</body>
</html>